{% load static %}
{% load i18n %}
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="renderer" content="webkit">
    <link rel="shortcut icon" href="/static/img/html_logo.png" type="image/x-icon">
    <title>{% trans 'Login Page' %}</title>
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'font-awesome/css/font-awesome.css' %}"  rel="stylesheet">
    <link href="{% static 'css/animate.css' %}" rel="stylesheet">
    <link href="{% static 'css/style.css' %}" rel="stylesheet">
</head>
<body class="gray-bg">
    <div class="middle-box text-center loginscreen  animated fadeInDown">
        <div>
            <div>
                <h1 class="logo-name"><img style="height:138px" src="{% static 'img/html_logo.png' %}"></h1>
            </div>
            <form class="m-t" action="{% url 'users:login' %}" role="form" method="post">{% csrf_token %}
                <div class="form-group">
                    <input type="email" class="form-control" name="username" value="" placeholder="用户名|Email" required="">
                </div>

                <div class="form-group">
                    <input type="password" class="form-control" name="password" value="" placeholder="密码|PassWord" required="">
                </div>

                <div class="form-group ">
                        <input class="pull-left" style="height:34px;" type="text" name='checkcode' placeholder="验证码"/>
                        <img onclick='ChangeCode();' id='imgCode' src='{% url 'checkcode' %}' title='{% trans 'Update Code' %}' />
                </div>

                <button type="submit" class="btn btn-primary block full-width m-b">{% trans 'Login' %}</button>

                {% if login_err %}
                <p>
                    <div class="alert alert-danger" id="login_err">
                        {{ login_err|safe }}
                    </div>
                </p>
                {% endif %}
                {% if messages %}
                <p>
                    <div class="alert alert-success" id="messages">
                        {{ messages|safe }}
                    </div>
                </p>
                {% endif %}
                </p>
            </form>
        </div>
    </div>
    <!-- Mainly scripts -->
     <script type="text/javascript">

            function ChangeCode() {
            var code = document.getElementById('imgCode');
            code.src += '?';
        }
    </script>
    <script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
